<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('stockOut.stockOut')"/>
        <div class="content">
            <el-button size="small"
                       @click="openAdd"
                       type="primary"
                       v-if="urlAvailible('stockOut-operate')">
                {{$t('stockOut.addStock')}}
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        class="input"
                        size="small"
                        prefix-icon="el-icon-search"
                        :placeholder="$t('stockOut.search')"></el-input>
                <el-button type="primary"
                           size="small"
                           @click="search">{{$t('search')}}</el-button>
                <el-button type="text"
                           @click="showEdit = !showEdit"
                           class="btn">{{btnText}}</el-button>

            </Search>
            <div class="table-wrapper">
                <el-table border
                          v-loading="loading"
                          element-loading-text="Loading.."
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)"
                          @expand-change="getPartDetail"
                          @filter-change="handleFilterChange"
                          stripe
                          row-key="id"
                          :data="stockList"
                >
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table :data="props.row.partList" border>
                                <el-table-column
                                        prop="partsNumber"
                                        :label="$t('part.partNo')"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        prop="denomination"
                                        :label="$t('part.description')"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="designation"
                                        :label="$t('part.description')"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="applyQuantity"
                                        :label="$t('invoice.qty')"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="partsQuantity"
                                        :label="$t('invoice.oQty')"
                                >
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('stockOut.stockOutNo')" prop="stockOutNum"></el-table-column>
                    <el-table-column :label="$t('stockOut.stockOutDate')" prop="stockOutDateStr"/>
                    <el-table-column :label="$t('stockOut.customer')"
                                     :filters="customerFilter"
                                     column-key="customer"
                                     prop="customer"></el-table-column>
                    <el-table-column :label="$t('stockOut.receiver')" prop="receiver"/>
                    <el-table-column :label="$t('stockOut.consignmentNo')" prop="salesOrderNum"/>
                    <el-table-column
                            column-key="stockOutStatus"
                            :label="$t('operate')"
                            v-if="showEdit"
                            prop="stockOutStatus"
                            :filters="[
                                {text:'Save',value:0},
                                {text:'Confirm',value:1}
                            ]">
                        <template slot-scope="stock">
                            <el-button type="text" size="small" v-if="!(stock.row.stockOutStatus === 1)"
                                       @click="showDetail(stock.row)">{{$t('edit')}}
                            </el-button>
                            <el-button type="text" size="small" v-else @click="showDetail(stock.row)">{{$t('print')}}
                            </el-button>
                            <el-button type="text" size="small" v-if="urlAvailible('delete_stock_out')"
                                       @click="deleteStockOut(stock.row)">{{$t('delete')}}
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <el-dialog :title="$t('stockOut.stockOut')"
                   :visible.sync="dialogVisible"
                   width="80%">
            <el-form :model="stock"
                     ref="stock"
                     label-width="150px"
                     :rules="rule">
                <el-form-item :label="$t('stockOut.stockOutNo')" prop="stockOutNum">
                    <el-input v-model="stock.stockOutNum"
                              disabled
                              size="small"
                              class="my-input"></el-input>
                </el-form-item>
                <el-form-item :label="$t('stockOut.apply')"
                              v-show="belongModule !== 3">
                    <el-select v-model="stock.applyId"
                               @change="applyChange"
                               :placeholder="$t('stockOut.apply')"
                               size="small">
                        <el-option
                                v-for="item in applyList"
                                :key="item.id"
                                :label="item.applicationNumber"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('stockOut.stockOutDate')"
                              prop="stockOutDateStr">
                    <el-date-picker v-model="stock.stockOutDateStr"
                                    value-format="yyyy-MM-dd"
                                    size="small"
                                    class="my-input"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('stockOut.customer')"
                              prop="customer">
                    <el-input v-model="stock.customer"
                              placeholder="Customer"
                              size="small"
                              class="my-input"
                              :disabled="belongModule !== 3">
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('stockOut.receiver')"
                              prop="receiver">
                    <el-input v-model="stock.receiver"
                              placeholder="Receiver"
                              size="small"
                              class="my-input"
                              :disabled="belongModule !== 3">
                    </el-input>
                </el-form-item>
                <el-form-item :label="$t('stockOut.applyType')"
                              prop="applyType">
                    <el-select v-model="stock.applyType"
                               size="small"
                               :disabled="belongModule === 1">
                        <el-option :value="0"
                                   :label="$t('stockOut.service')"></el-option>
                        <el-option :value="1"
                                   :label="$t('stockOut.consignment')"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="stock.applyType === 0"
                              :label="$t('stockOut.workingNo')"
                              prop="workOrderNo">
                    <el-select v-model="stock.workOrderNo"
                               filterable
                               size="small"
                               class="my-input"
                               :disabled="!isDisabled">
                        <el-option v-for="item in workNoList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="stock.applyType === 1"
                              :label="$t('stockOut.consignmentNo')"
                              prop="salesOrderNum">
                    <el-input v-model="stock.salesOrderNum"
                              size="small"
                              class="my-input"
                              :disabled="belongModule === 1"></el-input>
                </el-form-item>

                <div style="text-align: left;margin-bottom: 10px;">
                    <el-button size="small"
                               type="primary"
                               @click="dbVisible = true">Add Parts</el-button>
                </div>
                <Data-Base @deleteItem="deleteItem"
                           :show-sale="false"
                           :step="belongModule === 3 ? 0.5 : 1"
                           :partList="partList"
                           @warehouseChange="warehouseChange"
                           :isDisabled="isDisabled"/>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
                        <el-button @click="saveForm" type="warning" v-show="!(stock.stockOutStatus === 1)"
                                   v-if="urlAvailible('stockOut-operate')">{{$t('save')}}</el-button>
                        <el-button type="primary" @click="submitForm" v-show="!(stock.stockOutStatus === 1)"
                                   v-if="urlAvailible('stockOut-operate')"
                                   :disabled="!isDisabled">{{$t('confirm')}}</el-button>
                        <el-button type="primary" @click="print">{{$t('print')}}</el-button>
            </span>
        </el-dialog>
        <el-dialog
                :title="$t('download')"
                :visible.sync="downloadDialog"
                width="50%"
        >
            <el-form label-width="180px">
                <el-form-item label="Select Year">
                    <el-date-picker v-model="year" type="year" placeholder="Year" value-format="yyyy"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="downloadDialog = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="sub">{{$t('download')}}</el-button>
              </span>
        </el-dialog>
        <Part-item
                @close="dbVisible = false"
                @add="add"
                :visible="dbVisible"
                :belong-module='belongModule'/>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import Search from '../../components/common/search'
    import PartItem from '../../components/part/sparePartItem'
    import DataBase from '../../components/part/spDateBase_warehouse'
    import {mapActions} from 'vuex'
    import {
        getStockOutList,
        getStockWorkNo,
        getPart,
        stockOut,
        getStockOutDetail,
        saveStockOut,
        deleteStockOut, getStockOutApplicationListWithoutPage, stockOutApplicationDetail
    } from "../../api/service";
    import {getCustomerEmployee, getSpecCustomer} from "../../api/customer";
    import {getWarehouseList} from "../../api/warehouse";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'
    import spMixins from '../../util/spMixins'
    import authMixins from '../../util/authMixins'
    import {getWarehouseStock} from "../../api/stockIn";

    export default {
        name: "stock-out",
        mixins: [mixins, spMixins, authMixins],
        props: {
            belongModule: {
                type: Number,
            },
        },
        data() {
            return {
                downloadDialog: false,
                year: '',
                list: [],
                stockOutStatus: '',
                showEdit: false,
                workNoList: [],
                customerFilter: [],
                rule: {
                    stockOutNum: [{required: true}],
                    customer: [{required: true}],
                    receiver: [{required: true}],
                    stockOutDateStr: [{required: true}],
                    stockOutDetails: [{required: true}],
                },
                loading: true,
                applyList: [],
                stock: {
                    applyId: '',
                    stockOutNum: '',
                    warehouse: '',
                    customer: '',
                    receiver: '',
                    stockOutDateStr: '',
                    stockOutDetails: []
                },
                filterOption: [],
                warehouseList: [],
                key: '',
                employeeList: [],
                customerList: [],
                dialogVisible: false,
                editable: true,
                isDisabled: true,
                customer: ''
            }
        },
        computed: {
            btnText() {
                return this.showEdit ? 'Complete' : 'Edit'
            },
            stockList() {
                return this.list
            }
        },
        created() {
            this._getStockOutApplyList();
            this._getStockOutList();
            this._getStockWorkNo();
            this.getSpecCustomer();
            this.getWarehouse();
        },
        mounted() {
            this.$nextTick(() => {
                import('../../util/pdf.js').then(model => {
                    this.pdf = model.default;
                })
            })
        },
        methods: {
            // 仓库变化
            async warehouseChange(part) {
                const {status, data, msg} = await getWarehouseStock({
                    partsId:part.row.partsId || part.row.id,
                    belongModule:this.belongModule,
                    warehouse:part.row.detailWarehouse})
                if (status === ERROR_OK) {
                    const target = this.partList.find(item => {
                        return ( item.partsId === part.row.partsId ) ||  (item.id === part.row.id)
                    })
                    if (target) {
                        this.$set(part.row,'stockQuantity',data)
                    } else {
                        this.$set(part.row,'stockQuantity',0)
                    }
                } else {
                    this.$set(target,'stockQuantity',0)
                    this.$message.error(msg)
                }
            },
            //申请变化
            async applyChange(value) {
                const {status, data} = await stockOutApplicationDetail(value);
                if (status === ERROR_OK) {
                    this.stock = {
                        ...this.stock,
                        applyId: data.id,
                        stockOutNum: data.applicationNumber,
                        customer: data.customer,
                        receiver: data.receiver,
                        stockOutDateStr: data.applicationDateStr,
                    };
                    if (this.belongModule === 1) {
                        this.$set(this.stock, 'salesOrderNum', data.applicationNumber)
                    }
                    this.partList = data.stockOutApplicationDetailVos.map(item => {
                        return {
                            ...item,
                            applyQuantity: item.partsQuantity,
                            number: item.partsQuantity
                        }
                    });
                    this.dialogVisible = true;
                    this.$forceUpdate()

                }
            },
            //获取出库申请列表
            async _getStockOutApplyList() {
                const {status, data} = await getStockOutApplicationListWithoutPage(
                    {
                        belongModule: this.belongModule,
                    }
                );
                if (status === ERROR_OK) {
                    this.applyList = data;
                }
            },
            async deleteStockOut(row) {
                if (window.confirm('删除这个出库单?')) {
                    const {status} = await deleteStockOut(row.id);
                    if (status === ERROR_OK) {
                        this.$message.success('删除成功');
                        const idx = this.list.findIndex(item => item.id === row.id);
                        if (idx || idx === 0) {
                            this.list.splice(idx, 1);
                        }
                    }
                }
            },
            print() {
                let body = [
                    [
                        {text: 'No', style: 'tableHeader', alignment: 'center'},
                        {text: '配件编号 / Part No', style: 'tableHeader', alignment: 'center'},
                        {text: 'Description', style: 'tableHeader', alignment: 'center'},
                        {text: '中文描述', style: 'tableHeader', alignment: 'center'},
                        {text: 'Request Qty', style: 'tableHeader', alignment: 'center'},
                        {text: 'Qty', style: 'tableHeader', alignment: 'center'},
                        {text: 'Unit', style: 'tableHeader', alignment: 'center'},
                        {text: '备注／Remark', style: 'tableHeader', alignment: 'center'}
                    ],
                    // [{text: 'Service Item',colSpan:4, style: 'tableHeader', alignment: 'left'},{},{},{},{text: 'Service Fee',colSpan:4, style: 'tableHeader', alignment: 'left'},{},{},{}]
                ];
                const mainBody = this.partList.map((item, index) => {
                    return [index + 1, item.partsNumber, item.denomination, item.designation,item.applyQuantity, item.number, 'pcs', '']
                });
                body = body.concat(mainBody);
                let total = 0;
                mainBody.forEach(item => {
                    total += item[5]
                });
                body = body.concat([['', '', '', '', '',`Total:${total}`, '', '']]);
                let doc = {
                    filename: 'QO',
                    pageSize: 'LEGAL',
                    pageMargins: [10, 200, 10, 60],
                    header: [
                        {
                            margin: [20, 20, 20, 20],
                            columns: [
                                {
                                    width: '30%',
                                    text: [
                                        {
                                            text: 'PT INDONESIA EQUIPMENT LINE\n',
                                            style: 'header'
                                        },
                                        {
                                            text: "Leading in Service Innovation\n",
                                            style: 'subTitle'
                                        }
                                    ],

                                },
                                {
                                    width: '*',
                                    text: 'BUKTI PENGELUARAN SPAREPARTS\n配件出库单',
                                    style: 'title',
                                    alignment: 'right'
                                }
                            ],
                        },
                        {
                            margin: [20, 30, 0, 20],
                            columns: [
                                {
                                    width: '50%',
                                    text: [
                                        `日期／Date: ${this.stock.stockOutDateStr}\n`,
                                        `出库单号／Stock Out No: ${this.stock.stockOutNum}\n`,
                                        `用途/Apply Type: ${['Service', 'Consignment'][this.stock.applyType || 1]}\n`

                                    ],
                                    alignment: 'center'
                                },
                                {
                                    width: '*',
                                    text: [
                                        `客户/Customer: ${this.stock.customer}\n`,
                                        `取件人/Receiver: ${this.stock.receiver}\n`,
                                        `申请单号/Request No:${this.stock.workOrderNo}\n`
                                    ],
                                    alignment: 'center'
                                }
                            ]
                        }
                    ],
                    content: [
                        {
                            layout: 'lightHorizontalLines',
                            alignment: 'center',
                            table: {
                                // widths: ['auto', 'auto', 120, 120, 'auto', 'auto', 'auto'],
                                headerRows: 2,
                                body: body
                            }
                        },
                        {
                            margin: [20, 20, 20, 20],
                            columns: [
                                {
                                    width: '*',
                                    text: [
                                        `交货人人签字\nHandover By\n\n\n\n`,
                                        {
                                            text: '____________________',
                                        }
                                    ],
                                    alignment: 'left',
                                },
                                {
                                    width: '*',
                                    text: [
                                        `领件人签字\nReceived By\n\n\n\n`,
                                        {
                                            text: '____________________',
                                        }
                                    ],
                                    alignment: 'right',
                                }
                            ]
                        }
                    ],
                    footer: [
                        {
                            text: 'If you have any questions or concerns, please contact 0800-1581212',
                            width: '100%',
                            alignment: 'center'
                        },
                        {text: 'THANK YOU FOR YOUR BUSINESS! ', width: '100%', alignment: 'center'}
                    ],

                    defaultStyle: {
                        font: 'msyh'
                    },

                    styles: {
                        header: {
                            fontSize: 15,
                            bold: true
                        },
                        line: {
                            borderBottom: '2px solid #000',
                            marginTop: 20,
                            width: 200
                        },
                        title: {
                            fontWeight: 'light',
                            fontSize: 18,
                            bold: false
                        },
                        subTitle: {
                            fontSize: 12,
                            bold: true,
                            italic: true
                        }
                    }

                };
                this.$refs.stock.validate(valid => {
                    if (valid) {
                        this.pdf && this.pdf.open(doc);
                    } else {
                        this.$notify.error('Please complete the form')
                    }
                })

            },
            handleFilterChange(filter) {
                this.pageNum = 1;
                Object.keys(filter).forEach((key) => {
                    this[key] = filter[key][0]
                });
                this._getStockOutList()
            },
            async getWarehouse() {
                const {status, data} = await getWarehouseList();
                if (status === ERROR_OK) {
                    this.warehouseList = data;
                }
            },
            async getSpecCustomer() {
                const {status, data} = await getSpecCustomer();
                if (status === 0) {
                    this.customerList = data;
                    this.customerFilter = data.map(item => ({text: item.customerName, value: item.customerName}))
                }
            },
            async getPartDetail(r) {
                if (r.partList) {
                    return
                }
                const {status, data} = await getStockOutDetail(r.id);
                if (status === ERROR_OK) {
                    r.partList = data.map(item=>{
                        return {
                            ...item.spareParts,
                            partsQuantity:item.partsQuantity,
                            applyQuantity:item.applyQuantity,
                        }
                    });
                    const index = this.list.findIndex(item => item.id === r.id);
                    this.list.splice(index, 1, r);
                }

            },
            async saveForm() {
                this.$refs.stock.validate(async valid => {
                    if (valid) {
                        const {stockOutNum, applyId, stockOutDateStr, applyType, workOrderNo, salesOrderNum, customer, receiver, id, warehouse} = this.stock;
                        const belongModule = this.belongModule;
                        let stockOutDetails = this.partList.map(item => {
                            return {
                                partsId: item.id || item.partsId,
                                partsQuantity: item.number,
                                detailWarehouse: item.detailWarehouse
                            }
                        });
                        stockOutDetails = JSON.stringify(stockOutDetails);
                        const {status, msg} = await saveStockOut({
                            applyId,
                            stockOutNum,
                            stockOutDateStr,
                            applyType,
                            workOrderNo,
                            salesOrderNum,
                            customer,
                            receiver,
                            stockOutDetails,
                            id,
                            warehouse,
                            belongModule
                        });
                        if (status === ERROR_OK) {
                            this.clear();
                            this.modPartNum(JSON.parse(stockOutDetails));
                            this._getStockOutList();
                            this.dialogVisible = false;
                            this.$notify.success('save Stock out Successfully')
                        } else {
                            this.$notify.error(msg)
                        }
                    }
                })
            },
            async submitForm() {
                this.$refs.stock.validate(async valid => {
                    if (valid) {
                        const {stockOutNum, stockOutDateStr, applyId, applyType, workOrderNo, salesOrderNum, customer, receiver, id, warehouse} = this.stock;
                        const belongModule = this.belongModule;
                        let stockOutDetails = this.partList.map(item => {
                            return {
                                partsId: item.id || item.partsId,
                                partsQuantity: item.number,
                                detailWarehouse: item.detailWarehouse
                            }
                        });
                        stockOutDetails = JSON.stringify(stockOutDetails);
                        const {status, data} = await stockOut({
                            applyId,
                            stockOutNum,
                            stockOutDateStr,
                            applyType,
                            workOrderNo,
                            salesOrderNum,
                            customer,
                            receiver,
                            stockOutDetails,
                            id,
                            warehouse,
                            belongModule
                        });
                        if (status === ERROR_OK) {
                            this.clear();
                            this.modPartNum(JSON.parse(stockOutDetails));
                            this._getStockOutList();
                            this.dialogVisible = false;
                            this.$notify.success('Stock out Successfully')
                        } else {
                            data.forEach(item => {
                                setTimeout(() => {
                                    this.$notify.error(item);
                                }, 400)
                            })
                        }
                    }
                });


            },
            async showDetail(stock) {
                this.dialogVisible = true;
                const {status, data} = await getStockOutDetail(stock.id);
                if (status === ERROR_OK) {
                    this.stock = stock;
                    this.partList = data.map(part => {
                        return {
                            ...part.spareParts,
                            number: part.partsQuantity,
                            applyQuantity: part.applyQuantity,
                            detailWarehouse: part.detailWarehouse
                        }
                    })
                }
                if (stock.stockOutStatus === 1) {
                    this.isDisabled = false
                } else {
                    this.isDisabled = true
                }

            },
            changePage(page) {
                this.pageNum = page;
                this._getStockOutList();
            },
            async _getStockOutList() {
                const {status, data} = await getStockOutList(
                    {
                        customer: this.customer,
                        pageNum: this.pageNum,
                        warehouse: '',
                        belongModule: this.belongModule,
                        stockOutStatus: this.stockOutStatus,
                        stockOutNo: this.key
                    }
                );
                if (status === ERROR_OK) {
                    this.list = data.list;
                    this.total = data.total;
                    this.loading = false
                } else {
                    this.loading = false
                }
            },
            async search() {
                this.pageNum = 1;
                this._getStockOutList()
            },
            async _getStockWorkNo() {
                const {status, data} = await getStockWorkNo();
                if (status === ERROR_OK) {
                    this.workNoList = data;
                }
            },
            async _getPart(workOrderNo) {
                const {status, data} = await getPart(workOrderNo);
                if (status === ERROR_OK) {
                    if (data.length === 0) {
                        this.partList = [];
                        return
                    }
                    this.partList = data.map(part => {
                        return {
                            ...part.spareParts,
                            number: part.partsQuantity,
                            applyQuantity: part.partsQuantity
                        }
                    })
                } else {
                    this.partList = []
                }
            },

            async getEmployeeList(customerId) {
                const {status, data} = await getCustomerEmployee(customerId);
                if (status === ERROR_OK) {
                    this.employeeList = data;
                } else {
                    this.employeeList = []
                }
            },
            clear() {
                this.partList = [];
                this.stock = {
                    applyId: '',
                    warehouse: '',
                    stockOutNum: '',
                    stockOutDateStr: '',
                    applyType: '',
                    workOrderNo: '',
                    salesOrderNum: '',
                    stockOutDetails: []
                }
            },
            openAdd() {
                this.editable = true;
                this.dialogVisible = true;
                this.clear();
                if (this.belongModule === 1) {
                    this.$set(this.stock, 'applyType', 1)
                }
            },
            ...mapActions(['modPartNum'])
        },
        watch: {
            'stock.workOrderNo': {
                handler: function (workNo) {
                    // if(this.stock.stockOutNum) return
                    if (this.belongModule === 3 && this.stock.applyType === 0) {
                        if (!workNo) {
                            return
                        } else if (this.stock.id) {
                            return
                        }
                        this._getPart(workNo);
                        const warehouse = this.warehouseList.find(item => item.id === this.stock.warehouse);
                        let w = '';
                        if (warehouse) {
                            w = warehouse.warehouseName.substr(0, 1)
                        }
                        this.stock.stockOutNum = workNo + '-' + w
                    }
                },
                deep: true
            },
            'stock.customer': {
                handler: function (customer) {
                    if (!customer) {
                        return
                    } else {
                        const target = this.customerList.filter(item => item.customerName === customer)[0];
                        if (target) {
                            this.getEmployeeList(target.id);
                        }
                    }
                },
                deep: true
            },
            'stock.salesOrderNum': {
                handler: function (order) {
                    // if(this.stock.stockOutNum) return
                    if (this.stock.applyType === 1) {
                        const warehouse = this.warehouseList.find(item => item.id === this.stock.warehouse);
                        let w = '';
                        if (warehouse) {
                            w = warehouse.warehouseName.substr(0, 1)
                        }
                        this.stock.stockOutNum = order + '-' + w
                    }
                },
                deep: true
            },
            'stock.warehouse': {
                handler: function (warehouses) {
                    // if(this.stock.stockOutNum) return
                    if (this.stock.applyType === 0 || this.stock.applyType === 1) {

                    const warehouse = this.warehouseList.find(item => item.id === warehouses);
                    let w = '';
                    if (warehouse) {
                        w = warehouse.warehouseName.substr(0, 1)
                    }
                    this.stock.stockOutNum = this.stock.salesOrderNum || this.stock.workOrderNo + '-' + w
                }}
            },
            deep: true
        }
    ,

    components: {
        Crumb, Search, PartItem, DataBase
    }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }

    .btn {
        float: right;
        margin-right: 20px;
        transition: all 1s ease;
        opacity: 0.5;
        &:hover {
            opacity: 1;
        }
    }
</style>